<template>
    <h3>Computed</h3>
    <p>name {{name}}</p>
    <p>age {{age}}</p>
    <p>nameLength {{nameLength}}</p>
    <p>xusui {{xusui}}</p>
</template>

<script>
import {reactive,toRefs,computed} from "vue"

export default {
    setup(props,context) {
        console.log('Computed setup',props,context);

        const state = reactive({
            name:"steve",
            age:18
        })

        /* 基于一手数据state创建二手数据 */
        const nameLength = computed(
            ()=>{
                console.log("nameLength 重新运算");
                return state.name.length
            }
        )
        const xusui = computed(
            ()=>{
                console.log("xusui 重新运算");
                return state.age+1
            }
        )

        setInterval(() => {
            state.age++
        }, 1000);

        return {
            ...toRefs(state),
            nameLength,
            xusui
        }
        
    }
}
</script>